<template>
    <div>
        <el-form>
            <el-form-item>
                <div style="width: 100%; height: 80px;display: flex; flex-direction: row">
                    <div class="s">充值中心</div>
                    <div class="s1"   v-for="(i,index) in url"><img width="100%" height="100%" :key="index" :src='i.path' :pay_type="i.pay_type"  @click="changeurl(index)"   :class='{ active:index===numbers}'/></div>

                </div>
            </el-form-item>
            <el-form-item>
                <el-row>
                    <el-col :span="24"  >
                       <el-col class="s" style="height: 40px;line-height: 40px">充值套餐</el-col>
                        <el-button v-for="(item , index) in JSON.parse(all.discount)" :key="index"  @click="number=index,money=item.money"   :class='{ active:index===number}'>充值{{item.money}}送{{item.proportion}}</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-col class="s" style="height: 40px;line-height: 40px">充值金额</el-col>
                <el-col :span="6">
                    <el-input v-model="money"  ></el-input>
                </el-col>
                <el-col :span="24" style="margin-left: 80px">
                    1元=<span class="liuliang" v-model="llb_mg1">{{llb_mg1}}</span>
                    流量币，总计<span class="liuliang" v-model="llb">{{llb}}</span>
                    流量币， 约发布<span class="liuliang" v-model="ssll">{{ssll}}</span>
                    个搜索流量(<span class="liuliang" v-model="llb_mg">{{llb_mg}}</span>
                    流量币/个)，约<span class="liuliang" v-model="sc">{{sc}}</span>个收藏
                    (<span class="liuliang" v-model="sc_mg">{{sc_mg}}</span>流量币/个)
                </el-col>
                <el-col :span="24" style="margin-left: 80px;border: 1px solid #1799ea;">
                    <div style="padding-left: 20px">
                        <p style="font-size:18px;color: #1799ea; margin: 0">
                            温馨提示
                        </p>
                        <p style="margin: 0">一次性充值1000元以上自动升级为VIP会员，发布任务可享受优惠及停留时间等附加项免费权限！</p>
                        <p style="margin: 0">充值套餐越高，优惠越大！最高可享受1元=140流量币折扣！</p>
                    </div>

                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="6">
                    <el-button type="primary" style="margin-left: 80px;" @click="pay()">确定充值</el-button>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="24"
                        style="margin-left: 80px;color: #a6a6a6;background-color: #f9f9f9;border: 1px solid #ccc;">
                    <span style="margin-left: 10px">注意事项</span><br>
                    <span style="margin-left: 10px">  1、流量币会在您支付成功后自动充值到您的账户中；</span><br>
                    <span style="margin-left: 10px">2、付款过程中，请慢慢操作，不要随意刷新网页。如果支付失败，请重新下单支付；</span><br>
                    <span style="margin-left: 10px">3、目前支持支付宝和微信两种正规渠道支付！如需帮助，请联系客服；</span><br>
                    <span style="margin-left: 10px">4、平台暂不支持提供发票；充值的流量币不支持提现！如有疑问，请在充值前联系客服咨询！</span><br>
                    <span style="margin-left: 10px">5、如需代理流量业务或者有商家资源需合作的可向网站客服了解分站加盟和api合作！</span><br>
                </el-col>
            </el-form-item>
        </el-form>
        <div v-html="alipayWap" ref="alipayWap" style="background: #95b9e3;height: 50px ;width: 100px;"{{alipayWap}}</div>
    </div>
</template>

<script>
  import { pay } from '@/api/pay'
  import { mapGetters } from 'vuex'

  export default {
    name: 'llbcz',
    data() {
      return {
        url:[
          {path:'static/zfb.png',pay_type:'alipay'},

        ],// {path:'static/wx.png',pay_type:'wechat'},

        number: 1,
        numbers: 0,
        alipayWap:'',
        money: '200',
        llb_mg1:'105',
        llb:'21000',
        ssll:'1400',
        llb_mg:'15',
        sc:'667',
        sc_mg:'31',
      }

    },

    methods: {
      sopen() {
          this.$alert(`<img alt="" src="http://bbs.taouduo.com/api/pay/alipay?money=${this.money}">`, '支付宝充值', {
            dangerouslyUseHTMLString: true,
            center: true
          })
      },
      pay() {

        pay({
            money:this.money,
            'pay_type':this.url[this.numbers].pay_type
        }).then(res =>{
            this.$alert(`<img alt="" src="data:image/png;base64,${res.data}" >`, '支付宝充值', {
              dangerouslyUseHTMLString: true,
              center: true,
            })

        }).catch(error =>{
          console.log(error)
        })
        },

      count_price(price){
        let discount = JSON.parse(this.all.discount);
        let proportion = 0;
        console.clear();

          for (let i = 0; i < discount.length-1; i++) {
            if (price>= parseInt(discount[i].money)){
              console.log( discount[i].money);
              
            }
          }
        return proportion;
      },
      changeurl: function(index) {
        this.numbers= index;

      }
      },
   watch:{
     money: function (val, oldVal) {
       let proportion = this.count_price(val);
       console.log(proportion);
     },
   },
    computed: {
      ...mapGetters  ([
          'all'
  ])

  }
    }

</script>

<style scoped>
    .active{

        color: red;
        border: red solid 1px;

    }
    .liuliang{
        color: red;
    }
    .s {
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;

    }

    .s1 {
        width: 180px;
        height: 100%;
        border: 1px solid #ccc;
        display: inline-flex;
        margin-left: 5px;
    }
</style>
